<template>
  <div ref="container" class="Ab text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEditFun(1)">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEditFun(1)">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtPageIndexInfoFun">
        保存编辑
      </div>
    </div>
    <div class="top-text-view">
      <div class="ab">ab</div>
      <div v-if="isEdit" class="title">
        <input v-model="silibInfo.TitleA" />
      </div>
      <div v-else class="title">{{ silibInfo.TitleA }}</div>
      <div v-if="isEdit" class="desc">
        <textarea
          class="textarea"
          placeholder="输入介绍"
          v-model="silibInfo.IntroduceA"
        ></textarea>
      </div>
      <div v-else class="desc">
        {{ silibInfo.IntroduceA }}
      </div>
    </div>
    <div class="img-card">
      <div class="img-view-box">
        <div v-if="isEdit" class="upload-img-btn">
          <div class="upload-view" @click="showCropperFun('PicA')">
            上传图片
          </div>
        </div>
        <img :style="contentStyle" :src="silibInfo.PicAPath" alt="" />
      </div>
      <div :style="contentStyle" class="right">
        <div v-if="isEdit" class="title">
          <input v-model="silibInfo.TitleB" />
        </div>
        <div v-else class="title">{{ silibInfo.TitleB }}</div>
        <div v-if="isEdit" class="desc">
          <textarea
            class="textarea"
            placeholder="输入介绍"
            v-model="silibInfo.IntroduceB"
          ></textarea>
        </div>
        <div v-else class="desc">
          {{ silibInfo.IntroduceB }}
        </div>
      </div>
    </div>
    <div class="top-text-view">
      <div v-if="isEdit" class="sub"><input v-model="silibInfo.TitleC" /></div>
      <div v-else class="title title2">{{ silibInfo.TitleC }}</div>
      <div v-if="isEdit" class="desc">
        <textarea
          class="textarea"
          placeholder="输入介绍"
          v-model="silibInfo.IntroduceC"
        ></textarea>
      </div>
      <div v-else class="desc">
        {{ silibInfo.IntroduceC }}
      </div>
    </div>
    <div class="cover-img">
      <div v-if="isEdit" class="img-view-box1">
        <div class="upload-img-btn">
          <div class="upload-view" @click="showCropperFun('PicB')">
            上传图片
          </div>
        </div>
      </div>
      <img :src="silibInfo.PicBPath" alt="" />
    </div>
    <div class="img-view">
      <div class="left">
        <div v-if="isEdit" class="title">
          <input v-model="silibInfo.TitleD" />
        </div>
        <div v-else class="title">{{ silibInfo.TitleD }}</div>
        <div v-if="isEdit" class="desc">
          <textarea
            class="textarea"
            placeholder="输入介绍"
            v-model="silibInfo.IntroduceD"
          ></textarea>
        </div>
        <div v-else class="desc">
          {{ silibInfo.IntroduceD }}
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div class="img1">
            <div v-if="isEdit" class="upload-img-btn">
              <div class="upload-view" @click="showCropperFun('PicC')">
                上传图片
              </div>
            </div>
            <img class="img" :src="silibInfo.PicCPath" alt="" />
          </div>
          <div v-if="isEdit" class="img-view-box">
            <div class="upload-img-btn">
              <div class="upload-view" @click="showCropperFun('PicD')">
                上传图片
              </div>
            </div>
            <img class="img2" :src="silibInfo.PicDPath" alt="" />
          </div>
          <img v-else class="img2" :src="silibInfo.PicDPath" alt="" />
        </div>
        <div class="bottom">
          <div v-if="isEdit" class="upload-img-btn">
            <div class="upload-view" @click="showCropperFun('PicE')">
              上传图片
            </div>
          </div>
          <img class="img" :src="silibInfo.PicEPath" alt="" />
        </div>
      </div>
    </div>
  </div>
  <div v-if="showCropper" class="copper-view">
    <Copper
      :show="false"
      :fixed="false"
      :fixedNumber="curentData.fixedNumber"
      :url="curentData.url"
      @confirm="confirm"
    />
  </div>
</template>

<script lang="ts" setup>
import Copper from "@/components/Copper/index.vue";
import Cookies from "js-cookie";
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { EidtAb, GetAb, UploadFile } from "@/server";
const router = useRouter();
const token = Cookies.get("token");
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const showCropper = ref(false);
const openEdit = ref(0);
const closeEdit = () => {
  openEdit.value = 0;
};
const silibInfo = ref({}) as any;
const isEdit = computed(() => openEdit.value === 1);
const container = ref<HTMLElement | null>(null);
const contentStyle = ref({ width: "50%", height: "50%" });
const curentImg = ref("");
const confirm = async (file: any) => {
  if (file) {
    let newimgdata = URL.createObjectURL(file);
    const fd = new FormData();
    fd.append("file", file);
    const res: any = await UploadFile(fd);
    if (res.Tag === 1) {
      const FileName = res.Data[0].FileName;
      if (curentImg.value === "PicA") {
        silibInfo.value.PicA = FileName;
        silibInfo.value.PicAPath = newimgdata;
      } else if (curentImg.value === "PicB") {
        silibInfo.value.PicB = FileName;
        silibInfo.value.PicBPath = newimgdata;
      } else if (curentImg.value === "PicC") {
        silibInfo.value.PicC = FileName;
        silibInfo.value.PicCPath = newimgdata;
      } else if (curentImg.value === "PicD") {
        silibInfo.value.PicD = FileName;
        silibInfo.value.PicDPath = newimgdata;
      } else if (curentImg.value === "PicE") {
        silibInfo.value.PicE = FileName;
        silibInfo.value.PicEPath = newimgdata;
      }
    } else {
      store.error(res.Message); // 错误提示
    }
  }
  showCropper.value = false;
};
const showCropperFun = (type: string) => {
  curentImg.value = type;
  showCropper.value = true;
};
const curentData = computed(() => {
  if (curentImg.value === "PicA") {
    return {
      url: silibInfo.value.PicAPath,
      fixedNumber: [722, 483],
    };
  } else if (curentImg.value === "PicB") {
    return {
      url: silibInfo.value.PicBPath,
      fixedNumber: [1920, 960],
    };
  } else if (curentImg.value === "PicC") {
    return {
      url: silibInfo.value.PicCPath,
      fixedNumber: [314, 472],
    };
  } else if (curentImg.value === "PicD") {
    return {
      url: silibInfo.value.PicDPath,
      fixedNumber: [400, 584],
    };
  } else if (curentImg.value === "PicE") {
    return {
      url: silibInfo.value.PicEPath,
      fixedNumber: [742, 472],
    };
  } else {
    return {
      url: "",
      fixedNumber: [1, 1],
    };
  }
});
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const w = containerWidth / 2 - containerWidth * 0.13;
    const radio = 722 / 483;
    contentStyle.value = { width: w + "px", height: w / radio + "px" };
  }
};
const openEditFun = (n: number) => {
  openEdit.value = n;
};

const EidtPageIndexInfoFun = async () => {
  silibInfo.value.Operator = token;
  const res: any = await EidtAb(silibInfo.value);
  if (res.Tag === 1) {
    GetAbFun();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetAbFun = async () => {
  const res: any = await GetAb({});
  if (res.Tag === 1) {
    silibInfo.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetAbFun();
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  router.push(url);
};
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Ab {
  width: 100%;
  .top-text-view {
    padding: 70px 0 85px 0;
    width: 723px;
    margin: auto;
    text-align: left;
    .ab {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 22px;
    }
    .title {
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      margin-bottom: 18px;
      margin-top: 10px;
    }
    .title2 {
      font-size: 18px;
    }
    .desc {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 28px;
      white-space: pre-wrap;
    }
    .sub {
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 37px;
      margin-bottom: 22px;
    }
  }
  .img-card {
    display: flex;
    justify-content: center;
    img {
      width: 722px;
      height: 483px;
    }
    .right {
      text-align: left;
      padding-left: 80px;
      width: 722px;
      height: 483px;
      overflow: hidden;
      .title {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        margin-bottom: 18px;
        margin-top: 18px;
      }
      .desc {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 28px;
        white-space: pre-wrap;
      }
    }
  }
  .cover-img {
    position: relative;
    width: 100%;
    img {
      width: 100%;
      object-fit: contain;
    }
  }
  .img-view {
    display: flex;
    padding: 100px 4% 25px 4%;
    .left {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 18px;
      text-align: left;
      margin-top: 75px;
      margin-left: 80px;
      .title {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        margin-bottom: 18px;
        margin-top: 18px;
      }
      .desc {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 28px;
        white-space: pre-wrap;
      }
    }
    .right {
      width: 50%;
      .top {
        width: 100%;
        display: flex;
        .img1 {
          position: relative;
          padding: 50px;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .img2 {
          width: 50%;
          height: 100%;
          object-fit: contain;
        }
      }
      .bottom {
        position: relative;
        margin-top: 30px;
        width: 100%;
        padding-right: 30px;
        .img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
input {
  height: 26px;
}
.copper-view {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}
.img-view-box {
  position: relative;
  min-width: 200px;
  min-height: 200px;
  .img2 {
    width: 100% !important;
  }
}

.img-view-box1 {
  left: 50%;
  top: 40%;
  position: absolute;
  min-width: 200px;
  min-height: 200px;
}
</style>
